import React, { Component } from 'react';
import { View, Text } from '@tarojs/components'

interface defaultState {
    date: number;
    month:string;
    year:any,
    time:string;
}
class Header extends Component{
    timer:any;
    constructor(props) {
        super(props)
        
    }   
    state:defaultState={
        date: new Date().getDate(),
        month:["一","二","三","四","五","六","七","八","九","十","十一","十二"][new Date().getMonth()],
        year:new Date().getFullYear(),
        time:""
    }
    
    setTime(){
        this.timer = setInterval(() =>{
            this.setState({time:(new Date().getHours()>=10?new Date().getHours():"0"+new Date().getHours())+":"+(new Date().getMinutes()>=10?new Date().getMinutes():"0"+new Date().getMinutes())+":"+(new Date().getSeconds()>=10?new Date().getSeconds():"0"+new Date().getSeconds())})
        },1000);
    }

    componentDidMount(){
        this.setState({time:new Date().getHours()+":"+new Date().getMinutes()})
        this.setTime();
    }
    render(){
        return(
           <View className="header">
               <View className="day">
                   <View className="dayNumber">
                         {this.state.date}
                   </View>
                   <View className="dayYear">
                        <Text>{this.state.month}月</Text>
                        <Text>{this.state.year}</Text>
                   </View>
               </View>
               <View className="date">
                   {this.state.time}
               </View>
           </View>
       )
   }
}

export default Header